<template>
  <div class="kindbox">
    <van-tree-select
      :items="items"
      height="100%"
      :main-active-index.sync="activeIndex">
      <template slot="content">
        <ul>
          <li class="title">{{ items[activeIndex].text }}</li>
          <router-link :to="'/detail/' + item.proid" tag="li" v-for="item of kindlist" :key="item.proid">
            <div class="imgbox">
              <img :src="item.proimg" alt="">
            </div>
            <div class="kindinfo">
              <p class="k-t">{{ item.proname }}</p>
              <p class="k-saled">销量：{{ item.saled }}</p>
              <p class="specifications">
                <span class="price">￥{{ item.middlep }}.00</span>
                <span class="options" @click.stop="options(item)">选规格</span>
              </p>
            </div>
            <div class="cover" :style="{display:display}" @click.stop>
              <div class="coverinfo">
                <div class="cover-title">
                  {{ proname }}
                  <span class="dsappear" @click="disappear">x</span>
                </div>
                <div class="cover-content">
                  <p class="cuptype">杯型:</p>
                  <span class="midcup" @click="midcup" :style="{background:midbgc}" v-if="middlep">中杯</span>
                  <span class="bigcup" @click="bigcup" :style="{background:bigbgc}" v-if="bigp">大杯</span>
                </div>
                <div class="cover-bottom">
                  <span class="price">
                    <span v-if="midflag">￥ {{ middlep }}</span>
                    <span v-if="bigflag">￥ {{ bigp }}</span>
                  </span>
                  <span class="opt-type" v-if="!checkedflag">请选择规格</span>
                  <span class="joincar" v-else @click="add">加入购物车</span>
                </div>
              </div>
            </div>
          </router-link>
        </ul>
      </template>
    </van-tree-select>
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="" @click="onClickIcon" />
    </van-goods-action>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from '@/utils/request'
import { TreeSelect, Toast } from 'vant'
Vue.use(TreeSelect)
export default {
  data () {
    return {
      items: [
        {
          text: '全部',
          activeIndex: 0
        },
        {
          text: '热销',
          activeIndex: 1
        },
        {
          text: '新品',
          activeIndex: 2
        },
        {
          text: '推荐',
          activeIndex: 3
        }
      ],
      activeIndex: 0,
      index: 1,
      kindlist: [],
      display: 'none',
      midbgc: '#f5f5f5',
      bigbgc: '#f5f5f5',
      midflag: 0,
      bigflag: 0,
      checkedflag: 0,
      price: '',
      proname: '',
      middlep: '',
      bigp: '',
      proid: ''
    }
  },
  methods: {
    add () {
      var userid = localStorage.userid
      // console.log(this.middlep, this.bigp, this.bigflag, this.midflag)
      var price = this.bigflag === 0 ? this.middlep : this.bigp
      // console.log(this.proid)
      axios.get('/cart/add?userid=' + userid + '&proid=' + this.proid + '&num=1&price=' + price).then(() => {
        Toast('加入购物车成功')
      })
    },
    options (item, eve) {
      this.display = 'block'
      this.proname = item.proname
      this.middlep = item.middlep
      this.bigp = item.bigp
      this.proid = item.proid
    },
    disappear () {
      this.display = 'none'
    },
    midcup () {
      if (this.midflag === 0) {
        this.midflag = 1
        this.bigflag = 0
        this.checkedflag = 1
        this.midbgc = 'rgba(255,113,0,.2)'
        this.bigbgc = '#f5f5f5'
      } else {
        this.midflag = 0
        this.checkedflag = 0
        this.midbgc = '#f5f5f5'
      }
    },
    bigcup () {
      if (this.bigflag === 0) {
        this.bigflag = 1
        this.midflag = 0
        this.checkedflag = 1
        this.bigbgc = 'rgba(255,113,0,.2)'
        this.midbgc = '#f5f5f5'
      } else {
        this.bigflag = 0
        this.checkedflag = 0
        this.bigbgc = '#f5f5f5'
      }
    },
    onClickIcon () {
      this.$router.push('/cart')
    }
  },
  watch: {
    activeIndex (newval, oldval) {
      this.kindlist = []
      if (newval === 0) {
        axios.get('/pro').then(res => {
          res.data.data.map(item => {
            this.kindlist.push(item)
          })
        })
      }
      if (newval === 1) {
        axios.get('/pro').then(res => {
          res.data.data.map(item => {
            if (item.hot === 1) {
              this.kindlist.push(item)
            }
          })
        })
      }
      if (newval === 2) {
        axios.get('/pro').then(res => {
          res.data.data.map(item => {
            if (item.newpro === 1) {
              this.kindlist.push(item)
            }
          })
        })
      }
      if (newval === 3) {
        axios.get('/pro').then(res => {
          res.data.data.map(item => {
            if (item.recommend === 1) {
              this.kindlist.push(item)
            }
          })
        })
      }
    }
  },
  created () {
    axios.get('/pro').then(res => {
      res.data.data.map(item => {
        this.kindlist.push(item)
      })
    })
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.kindbox {
  @include rect(100%, 6rem);
  .van-tree-select__content {
    @include rect(100%,100%);
    overflow: auto;
    ul {
      @include rect(100%,auto);
      @include overflow();
      @include padding(0 0 1.5rem 0);
      li {
        @include flexbox();
        @include rect(100%,1.13rem);
        padding:8px 10px 10px;
        position: relative;
        .imgbox {
          @include rect(0.94rem,0.94rem);
          margin-right: 10px;
          img {
            @include rect(0.94rem,0.94rem);
            text-align: left;
          }
        }
        .k-t {
          font-size: 15px;
          color: #333;
        }
        .k-saled {
          margin-bottom: 3px;
          margin-top: 4px;
          height: .15rem;
          color: #999;
          font-size: 10px;
        }
        .specifications {
          margin-top: 30px;
          color: #ff7100;
          font-size: 17px;
          .options {
            @include rect(0.47rem,0.24rem);
            position: relative;
            display: inline-block;
            border-radius: .44rem;
            cursor: pointer;
            color: #fff;
            font-size: 11px;
            background-color: #ff7100;
            text-align: center;
            line-height: 0.24rem;
            margin-left: 19px;
            z-index: 99;
          }
        }
        .cover {
          @include rect(3.75rem, 8rem);
          display: none;
          position: fixed;
          top:-58px;
          left: 0;
          z-index: 1000;
          background-color: rgba(0,0,0,.1);
          .coverinfo {
            @include rect(3.25rem,3.34rem);
            position: fixed;
            top: 15%;
            left: 7%;
            background-color: #fff;
            .cover-title {
              @include rect(100%,0.48rem);
              font-size: .16rem;
              font-weight: 600;
              color: #333;
              background-color: #fbfbfb;
              text-align: center;
              line-height: 0.48rem;
              position: relative;
              span {
                @include rect(0.16rem,0.16rem);
                height: 0.16rem !important;
                position: absolute;
                height: auto;
                top: 15px;
                right: 20px;
                line-height: 0.2rem;
                color: #ccc;
                font-size: .20rem;
              }
            }
            .cover-content {
              padding-left: 20px;
              @include rect(100%, 2.42rem);
              .cuptype {
              padding:15px 0 10px;
              color: rgb(102, 102, 102);
              font-size: 0.13rem;
              }
              .midcup, .bigcup{
                @include rect(0.4rem, 0.35rem);
                color: #666;
                background-color: #f5f5f5;
                border-radius: .02rem;
                display: inline-block;
                margin-right: .15rem;
                line-height: 0.35rem;
                text-align:  center;
              }
            }
            .cover-bottom {
              background-color: #fafafa;
              @include rect(100%, 0.44rem);
              @include flexbox();
              justify-content: space-between;
              align-items: center;
              .price {
                color: #ff7100;
                font-size: .2rem;
                line-height: .44rem;
                font-weight: 600;
                margin-left: 20px;
              }
              .joincar, .opt-type {
                @include rect(0.9rem, 0.3rem);
                background: rgb(255, 113, 0);
                line-height: 0.3rem;
                text-align: center;
                font-size: 14px;
                border-radius: .15rem;
                color: #fff;
                margin-right: 20px;
              }
              .opt-type {
                background: #aaa;
              }
            }
          }
        }
      }
      .title {
        @include rect(100%,0.26rem);
        line-height: 0.26rem;
        padding: 0;
        padding-top: 10px;
        padding-left: 8px;
        font-size: 14px;
        color: #5c5c5c;
      }
    }
  }
}
</style>
